<template>
    <div>
        <el-form :model="form" 
        status-icon :rules="rules" 
        ref="form" 
        label-width="100px" 
        class="demo-form">
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="账号" prop="username">
                <el-input type="username" v-model="form.username" autocomplete="off" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码"  prop="password" >
                <el-input v-model="form.password" placeholder="密码" ></el-input>  
            </el-form-item>
            <el-form-item label="确认密码"  prop="psd">
                <el-input v-model="form.psd" placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="login-sub" style="background:#892700" @click="registTodo">注册</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import {Regist} from "@/api"
export default {
    data(){
        return {
            form:{},
             rules: {
            mobile:[
                {required: true, message: '请输入手机号码', trigger: 'blur' },
                {
                    validator:(rule,value,callback)=>{
                        var pass = /^1(3|4|6|7|8|9)\d{9}$/
                        if(pass.test(value)){
                            callback()
                        }else{
                            callback(new Error("请输入正确的手机号"))
                        }
                    },trigger:"blur"
                }  
            ],
            username:[
                {required: true, message: '请输入账号', trigger: 'blur' }
            ],
            password:[
                {required: true, message: '请输入密码', trigger: 'blur' },
                 {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
            ],
             psd:[ {required:true,message:"请输入确认密码",trigger:"blur" },
                    {
                        validator:(rule,value,callback) => {
                            if(value !== this.form.password){
                                callback(new Error("两次密码不同，请重新输入"))
                            }else{
                                callback()
                            }
                        },
                         trigger:'blur'
                    }
                ]
        }
        }
    },
    methods:{
        registTodo(){
             this.$refs.form.validate(valid=>{
                if(valid){
                   Regist({
                       mobile:this.form.mobile,
                       username:this.form.username,
                       password:this.form.password
                   }).then(res=>{
                       if(res.type){
                           this.form = {}
                       }
                   })
                }else{
                    this.$message.error("请完善信息")
                }
            })
        }
    }
}
</script>


<style lang="scss" scoped>
     ::v-deep  .slide-verify{

            margin:60px auto;
        }
    .demo-form{
        width: 350px;
        margin-top: 25px;
        text-align: center;
       
    }
    .login-sub{
       border: 0;
    }
</style>